<template>
  <div class="common-warp wh100 warp-bg">
    <div class="noo">
      <a-card title="钱包类型信息">
        <!-- <template #extra><a href="#">more</a></template> -->
        <a-form ref="formRef" :model="state.form" :rules=rules>
          <a-form-item label="钱包归属" name="employeeCode">
            <a-select v-model:value="state.form.employeeCode" show-search placeholder="请输入工号" style="width: 100%"
              :default-active-first-option="false" :show-arrow="false" :filter-option="false" not-found-content="暂无此人"
              :options="state.employeeList" @search="handleSearch" @change="handleChange">
            </a-select>
          </a-form-item>
          <a-form-item label="钱包类型" name="walletCategoryCode">
            <a-select v-model:value="state.form.walletCategoryCode" style="width:  100%">
              <a-select-option v-for="item in state.walletCategoryList"
                :value="item.value">{{ item.label }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="钱包状态" name="status">
            <a-switch checked-children="启用" un-checked-children="停用" v-model:checked="state.form.status" :checkedValue=1
              :unCheckedValue=2 />
          </a-form-item>
        </a-form>
      </a-card>
    </div>
    <a-button type="primary" block @click="confirm(formRef)">提交</a-button>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, } from 'vue';
import { useRouter } from 'vue-router'
import { usePosWalletCreateApi, usePersonEmployeeListApi, usePosWalletCategoryListApi } from '@/api/index'
import { message } from 'ant-design-vue';
import type { EmployeeItem } from "@/types/person/employee";
import type { WalletCategoryItem } from "@/types/pos/walletCategory/index";
const router = useRouter()
const formRef = ref();

const rules = {
  name: [{ required: true, message: '请输入钱包类型名称', trigger: 'change' }],
};

const useContent = () => {
  return {
    employeeCode: '',
    status: 1,
    walletCategoryCode: '',
  }
}

const state = reactive({
  form: useContent(),
  employeeList: [] as any[],
  walletCategoryList: [] as any[],
})

//输入搜索

const handleChange = (value: any) => {
  console.log('handleChange', value);

}
const handleSearch = (value: any) => {
  console.log('handleSearch', value);
  getEmployeeList(value)
}

const getEmployeeList = async (code: string) => {
  let { data } = await usePersonEmployeeListApi({ code })
  data = data || []
  state.employeeList = data.map((item: EmployeeItem) => {
    return {
      value: item.code,
      label: item.name,
    }
  })
}
const getWalletCategoryList = async () => {
  let { data } = await usePosWalletCategoryListApi()
  data = data || []
  state.walletCategoryList = data.map((item: WalletCategoryItem) => {
    return {
      value: item.code,
      label: item.name,
    }
  })
}


//提交
const confirm = (formRef: any) => {
  if (!formRef) return;
  formRef.validate().then(async () => {
    await usePosWalletCreateApi(state.form)
    message.success("操作成功",2);
    setTimeout(() => {
      router.push({ name: 'PosWallet' })
    }, 2300)
  })
};

onMounted(() => {
  document.title = '新增'
  getWalletCategoryList()
})

</script>
<style scoped lang='less'>
.noo {
  height: calc(100vh - 56px);
  overflow-y: scroll;

  :deep(.ant-form-item-label) {
    padding: 0 !important;
  }

  :deep(.ant-card-body) {
    padding: 4px 12px !important;
  }

  :deep(.ant-card-head) {
    padding: 12px !important;
  }

  :deep(.ant-form-item) {
    margin-bottom: 12px !important;
  }

}
</style>